<template>
	<div id="film">
		<van-tabs v-model="active" :sticky="true" @change="change">
			<van-tab title="正在上映"></van-tab>
			<van-tab title="即将上映"></van-tab>
		</van-tabs>
		<router-view></router-view>
	</div>
</template>

<script>
	import { Tab, Tabs } from 'vant';
	export default {
		data() {
			return {
				active: 0
			}
		},
		components: {
			[Tab.name]: Tab,
			[Tabs.name]: Tabs
		},
		created() {

		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				debugger;
				if(from.path === '/film/coming-soon') {
					vm.active = 1;
				}
			})
		},
		watch: {
//			active(index) {
//				if(index === 0) {
//					this.$router.push({
//						name: 'now-playing'
//					});
//				} else {
//					this.$router.push({
//						name: 'coming-soon'
//					});
//				}
//			}
		},
		methods: {
			change(index) {
				if(index === 0) {
					this.$router.push({
						name: 'now-playing'
					});
				} else {
					this.$router.push({
						name: 'coming-soon'
					});
				}
			}
		}
	}
</script>

<style lang="less">
	#film .van-tabs {
		border-bottom: 1px solid orange;
	}
</style>